<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
   	<script type="text/javascript" src="js/url.js" ></script>
   	<script type="text/javascript" src="js/util.js" ></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
      	
      	//酒店id、房型id
      	var rid;
      	var hid;
      	var beginTime;
      	var endTime;
      	mui.plusReady(function(){
      		
      		var cpage = plus.webview.currentWebview();
      		
      		//plus.navigator.setStatusBarBackground()
      		
      		//获得下单的参数
      		hid = cpage.hid;
      		rid = cpage.rid;
      		beginTime = cpage.beginTime;
      		endTime = cpage.endTime;
      		var htitle = cpage.htitle;
      		var rtitle = cpage.rtitle;
      		
      		document.getElementById("htitle").innerHTML = htitle;
      		document.getElementById("rtitle").innerHTML = rtitle;
      		document.getElementById("beginTime").innerHTML = beginTime;
      		document.getElementById("endTime").innerHTML = endTime;
      		
      		//主动计算一下订单价格明细
      		getPrice();
      		
      		//设置点击事件
      		document.getElementById("submitBtn").addEventListener("tap", function(){
      			
      			//提交订单
 
      			
      			//下单数量
      			var rnumber = document.getElementById("rnumber").value;
      			
      			//住户姓名
      			var name = document.getElementById("name").value;
      			//身份证
      			var sfz = document.getElementById("sfz").value;
      			//手机号
      			var phone = document.getElementById("phone").value;
      			
      			myajax({
      				url: url.submitOrder,
      				data:{
      					hid: hid,
      					rid: rid,
	      				beginTime: beginTime,
	      				endTime: endTime,
	      				rnumber: rnumber,
	      				name: name,
	      				phone: phone
      				}, 
      				success: function(data){
      					//下单成功，跳转到支付选择页面
      					mui.openWindow({
      						url: "pay.html",
      						id: "pay.html",
      						extras: {
      							oid: data
      						}
      					})
      				}
      			});
      		});
      		
      		
      		/* //优惠券的点击查看页面
      		document.getElementById("couponSelect").addEventListener("tap", function(){
      			
      			//下单数量
      			var rnumber = document.getElementById("rnumber").value;
      			
      			//跳转到我的优惠券列表
      			mui.openWindow({
      				url: "mycoupon.html",
      				id: "mycoupon.html",
      				extras: {
      					hid: hid,
      					rid: rid,
	      				beginTime: beginTime,
	      				endTime: endTime,
	      				rnumber: rnumber
      				}
      			});
      		}); */
      	});
      	
      	/**
      	 * 计算当前下单的总价
      	 */
      	function getPrice(){
      		
      		var rnumber = document.getElementById("rnumber").value;
      		
      		myajax({
      			url: url.getPrice,
      			data: {
      				rid: rid,
      				beginTime: beginTime,
      				endTime: endTime,
      				rnumber: rnumber
      			},
      			success: function(data){
					//console.log(JSON.stringify(data));
      				//获得总价
      				var allprice = data.allprice;
      				//价格明细
      				var priceDetails = data.priceDetails;
      				
      				document.getElementById("allprice").innerHTML = allprice;
      				
      				var html = "";
      				for(var i = 0; i < priceDetails.length; i++){
      					html += '<div class="mui-row">';
				    	html += '<div class="mui-col-sm-6" style="padding: 10px; font-size: 15px;">' + priceDetails[i][0] + '</div>';
				    	html += '<div class="mui-col-sm-6" style="padding: 10px;">' + priceDetails[i][1] + '</div>';
				    	html += '</div>';
      				}
      				
      				document.getElementById("priceDetails").innerHTML = html;
      			}
      		});
      	}
    </script>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav" style="background-color: white;">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: black;"></a>
		<h1 class="mui-title" style="color: black;">订单编辑</h1>
	</header>
	
	<div class="mui-content" style="margin-top: 20px;">
    	<div class="mui-row">
    		<div id="htitle" class="mui-col-sm-12" style="padding: 10px; font-size: 30px; font-weight: 900;">酒店标题</div>
    		<div id="rtitle" class="mui-col-sm-12" style="padding: 10px; font-size: 20px;">房间标题</div>
    		
    		
    		<div class="mui-col-sm-12" style="padding: 10px; font-size: 20px;">下单明细</div>
    	</div>
    	
    	<!-- 下单明细 -->
    	<div class="mui-row">
    		<div class="mui-col-sm-2" style="padding: 10px; font-size: 15px;">预订时间</div>
    		<div id="beginTime" class="mui-col-sm-4" style="padding: 10px; font-size: 20px;">xxxx-xx-xx</div>
    		<div class="mui-col-sm-2" style="padding: 10px; font-size: 15px;">到</div>
    		<div id="endTime" class="mui-col-sm-4" style="padding: 10px; font-size: 20px;">xxxx-xx-xx</div>
    	</div>
    	
    	<div class="mui-row">
    		<div class="mui-col-sm-2" style="padding: 10px; font-size: 15px; line-height: 40px;">预订数量</div>
    		<div class="mui-col-sm-6" style="padding: 10px;"><input onblur="getPrice()" id="rnumber" type="text" value="1"/></div>
    	</div>
    	
    	<!-- 用户信息 -->
    	<div class="mui-row">
    		<div class="mui-col-sm-2" style="padding: 10px; font-size: 15px; line-height: 40px;">住客姓名</div>
    		<div class="mui-col-sm-6" style="padding: 10px;"><input id="name" type="text" value="" placeholder="请输入住客真实姓名"/></div>
    	</div>
    	<div class="mui-row">
    		<div class="mui-col-sm-2" style="padding: 10px; font-size: 15px; line-height: 40px;">身份证</div>
    		<div class="mui-col-sm-8" style="padding: 10px;"><input id="sfz" type="text" value="" placeholder="请输入住客身份证号码"/></div>
    	</div>
    	<div class="mui-row">
    		<div class="mui-col-sm-2" style="padding: 10px; font-size: 15px; line-height: 40px;">手机号码</div>
    		<div class="mui-col-sm-6" style="padding: 10px;"><input id="phone" type="text" value="" placeholder="请输入住客手机号码"/></div>
    	</div>
    	
    	<button id="couponSelect" style="margin: 20px;" class="mui-btn-blue">选择优惠券</button>
    	
    	<!-- 价格明细 -->
    	<div class="mui-row">
    		<div class="mui-col-sm-12" style="padding: 10px; font-size: 20px;">价格明细</div>
    	</div>
    	<span id="priceDetails">
    		
    	</span>
    	<!--<div class="mui-row">
    		<div class="mui-col-sm-6" style="padding: 10px; font-size: 15px;">2020-07-10</div>
    		<div class="mui-col-sm-6" style="padding: 10px;">1 x 998</div>
    	</div>-->
    	
    </div>
    
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item" style="color: red;">
            <div class="mui-row">
	    		<div class="mui-col-sm-6" style="padding: 30px; font-size: 30px;">总价：￥<span id="allprice">172763</span></div>
    		</div>
        </a>
        <a id="submitBtn" class="mui-tab-item" style="color: #6641E2;">
            <div class="mui-row">
            	<div class="mui-col-sm-6" style="padding: 30px; font-size: 30px; margin-left: 100px;">下单</div>
            </div>
        </a>
    </nav>
	
</body>
</html>